@charset "utf-8";

.music{
    img{
        position:absolute;
        top:20px;
        right:20px;
        z-index:99;
        width:30px;
        height:30px;
        animation: music 1.3s linear infinite;
    }
}
.position-margin{
    position:absolute;
    margin:0 auto;
    left:0;
    right:0;
}
.page{
    background: url(../img/page02-06.jpg);
    width:100%;
    height:100%;
}


//page01部分开始
.mother-style{
    margin:0 auto;
    position:absolute;
    left:20px;
    right:0;
    top:150px;
    z-index: 90;  
}
.check{
    position: absolute;
    width:100%;
    height:100%;
    top:13%;
}
.page01{
    position:relative;
    overflow: hidden;
    .small-area{
        width:250px;
        height:45px;
        background: #FFDA00;
        @extend .position-margin;
        top:409px;
        p{
            font-size: 16px;
            text-align: center;
            opacity: 0;
            transform: scale(1.4);
        }
        .small-p1{
            transform: translateY(-150px) scale(1) rotateZ(0deg);

        }
        .small-p2{
            transform: translateY(-140px) scale(1) rotateZ(0deg);

        }
    }
    //mother边框部分开始
    .content-border{   
        >a>img{
            width:183px;
            height:289px; 
            @extend .position-margin;
            top:-439px;           
            z-index: 89;        
        }
        .mother{    
            //mother人物开始
            overflow: hidden;  
            .mother-1{               
                @extend .mother-style;

                z-index: 98;               
            }
            .mother-2{        
                @extend .mother-style;     

                z-index: 99;               
            }
            .mother-front{        
                @extend .mother-style;     
                         
            }
            .mother-back{        
                @extend .mother-style;     

                z-index:88;                        
            }
            .mother-left-01{
                @extend .mother-style; 
                left: -150%;

               
            }
            .mother-left-02{
                @extend .mother-style; 
                left: -150%;

            }
            
            .mother-left-03{
                @extend .mother-style; 
                left: -150%;

            }
            .mother-right-01{
                @extend .mother-style; 
                right: -150%;

            }
            .mother-right-02{
                @extend .mother-style; 
                right: -150%;

            }
            .mother-right-03{
                @extend .mother-style; 
                right: -150%;

            }
            .mother-right-04{
                @extend .mother-style; 
                right: -150%;

            }
            //mother人物结束
        }
        //mother边框部分结束       
    }
    //mother大标题部分开始
    .mother-title{
        img{
            @extend .position-margin;
            top:24px;
            z-index:90;
            transform: scale(1.5);
            opacity: 0;

        }
    }
     //mother大标题部分结束  
     //圆圈文字部分开始
     .circle-box{
         
         width:183px;
         height:289px; 
         margin:0 auto;
         margin-top:110px; 
         position:relative;
     }
        .circle{
            width:52px;
            height:52px;
            text-align: center;
            opacity: 0;
            border:1px solid black;
            border-radius: 26px;
            background: white;
            font-size: 20px;
            font-weight: bold;
            position:absolute;
            z-index:99;
        }
        .circle-title01{
            top:80px;
            margin:0 auto;
            left:-62px;
            line-height: 52px;

            
        }
        .circle-title02{
            top:200px;
            margin:0 auto;
            left:-62px;
            line-height: 52px;

            
        }
        .circle-title03{
            top:80px;
            margin:0 auto;
            right:-62px;
            line-height: 52px;

            
        }
        .circle-title04{   
            top:200px;
            margin:0 auto;
            right:-62px;

           
        }
        //圆圈文字部分开始
}

.page01.active{
    .small-area{
        p{
            transform: scale(1.4);
        }
        .small-p1{
            transform: translateY(-150px) scale(1) rotateZ(0deg);
            animation: small-p 1s ease 4.4s forwards;
        }
        .small-p2{
            transform: translateY(-140px) scale(1) rotateZ(0deg);
            animation: small-p 1s ease 4.8s forwards;
        }
    }
    //mother边框部分开始
    .content-border{   
        >a>img{          
            animation:page01-border 500ms ease 1500ms forwards;     
        }
        .mother{    
            .mother-1{               
                animation: mother1 200ms 1s;        
            }
            .mother-2{          
                animation: mother2 100ms 1s infinite;            
            }
            .mother-front{        
                animation: mother-front 2s ease 3.4s;                            
            }
            .mother-back{        
                animation: mother-back 800ms ease 4.2s 2;                       
            }
            .mother-left-01{
                animation: mother-left 450ms ease 1100ms forwards;
               
            }
            .mother-left-02{
                animation: mother-left 450ms ease 1280ms;
            }
            
            .mother-left-03{
                animation: mother-left 450ms ease 1430ms;
            }
            .mother-right-01{
                animation: mother-right 450ms ease 1100ms ;
            }
            .mother-right-02{
                animation: mother-right 450ms ease 1280ms;
            }
            .mother-right-03{
                animation: mother-right 450ms ease 1430ms;
            }
            .mother-right-04{
                animation: mother-right 450ms ease 2070ms;
            }
            //mother人物结束
        }
        //mother边框部分结束       
    }
    //mother大标题部分开始
    .mother-title{
        img{
            transform: scale(1.5);
            animation: mother-title 1s ease 4.2s forwards;
        }
    }
     //mother大标题部分结束  
     //圆圈文字部分开始
     .circle-box{

     }
        .circle{

        }
        .circle-title01{

            animation: circle-title 1s ease 4.8s forwards ;
            
        }
        .circle-title02{

            animation: circle-title 1s ease 4.9s forwards;
            
        }
        .circle-title03{

            animation: circle-title 1s ease 4.9s forwards;
            
        }
        .circle-title04{   

            animation: circle-title 1s ease 5s forwards;
           
        }
        //圆圈文字部分开始
}



//mother人物部分开始
@keyframes mother1{
    0%{transform: rotate(0)}
    20%{transform: rotateZ(7deg)}
    40%{transform: rotateZ(-7deg);}
    60%{transform: rotateZ(7deg)}
    80%{transform: rotateZ(-7deg);}
    100%{transform: rotate(0) }
}
@keyframes mother2{
    0%{transform: translate(0);}  
    50%{transform: translateX(-0.7px) translateY(-0.7px)}
    100%{
       transform: translate(0)
    }
}
@keyframes mother-front{
    0%{opacity: 1;}  
    100%{
        opacity: 0;
        transform: scale(2);
    }
}
@keyframes mother-back{
    0%{opacity: 1;}  
    100%{
        opacity: 0;
        transform: scale(2);
    }
}
@keyframes mother-left{
    from{opacity: 0.5;left: -150%;}to{left:20px;opacity: 0.8;}
}
@keyframes mother-right{
    from{opacity: 0.5;}to{right:10px;opacity: 0.8;}
}
//mother人物部分结束

//mother边框部分开始
@keyframes page01-border{
    0%{}
    40%{
       top:110px ;
    }
    80%{
        top:90px;
    }
    100%{
        top:110px;
    }
}
//mother边框部分开始

//mother大标题动画部分结束
@keyframes mother-title{
    from{}to{transform: scale(1);opacity: 1;}
}
//mother大标题动画部分结束

//mother大标题动画部分结束
@keyframes circle-title{
    0%{
        
    }
    15%{
        transform: scale(1.2);
        opacity: 0.6;
    }
    30%{
        transform: scale(1);
        opacity: 0.8;
    }
    45%{
        transform: scale(1.2);
        opacity: 1;
    }
    60%{
        transform: scale(1);
        opacity: 1;
    }
    75%{
        transform: scale(1.2);
        opacity: 1;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}
//mother大标题动画部分结束

//小区域文字开始
@keyframes small-p{
    from{}to{transform: translateY(0) scale(1) rotateZ(720deg);opacity: 1;}
}
//小区域文字开始

@keyframes page-music{
    from{}to{transform: rotateZ(360deg);}
}

//page01部分结束

@keyframes music{
    from{transform: rotateZ(0deg);}to{transform: rotateZ(360deg);}
}













